<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax-实现异步请求</title>
    <script src="js/jquery-3.7.1.js"></script>
</head>
<body>
    <h1>Ajax-实现异步请求</h1>
    <button onclick="getMsg()">原生JS实现异步请求</button>
    <button id="btn1">Jquery实现异步请求</button>
    <p>响应结果：<span id="jg"></span></p>

    <script>
        // 向服务器发起异步请求，请求到hello.do，获取响应数据
        function getMsg(){
            //第一：实例化 XMLHttpRequest 对象
            var xml = new XMLHttpRequest();

            //第二：初始化HTTP请求参数 - open()
            //xml.open(请求方式,Servlet访问地址,是否异步)
            xml.open("get","hello.do",true);

            //第三：发送请求 - xml.send
            xml.send();

            //第四：设    置回调函数 - 监听 readyState 属性
            xml.onreadystatechange = function (){
                //判断服务器是否完成响应 - xml.redyState=4:服务器完成响应
                //xml.status == 200：Http响应状态，200表示OK
                if (xml.readyState == 4 && xml.status == 200){
                    //第五：获取服务器响应的数据
                    var msg = xml.responseText;
                    console.log(msg);

                    //第六：回显数据
                    document.querySelector("#jg").innerText = msg;
                }
            }
        }


       $("#btn1").click(function(){
           /* 使用JQ实现异步请求 - jQuery = $
        注意：JQ中，各选项的配置是以对象的方式进行配置,语法如下：
        {
            选项名1:属性值,
            ...
            选项名N:属性值
        }
        */
           // jQuery.ajax()
           $.ajax("hello.do",{
               type:"get",
               success:function(data){
                   // console.log(data)
                   $("#jg").text(data)
               }
           });
       });
    </script>
</body>
</html>